<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>API 测试页面</span>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <h3>语言切换API测试</h3>
          <el-button @click="testChangeLanguage('zh')" type="primary">切换到中文</el-button>
          <el-button @click="testChangeLanguage('en')" type="success">Switch to English</el-button>
        </el-col>
        
        <el-col :span="12">
          <h3>获取当前语言API测试</h3>
          <el-button @click="testGetCurrentLanguage" type="info">获取当前语言</el-button>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <el-row>
        <el-col :span="24">
          <h3>API响应结果:</h3>
          <el-input
            type="textarea"
            :rows="10"
            v-model="apiResponse"
            placeholder="API响应将显示在这里..."
          />
        </el-col>
      </el-row>
      
      <el-divider />
      
      <el-row>
        <el-col :span="24">
          <h3>手动API测试:</h3>
          <el-input
            v-model="testUrl"
            placeholder="输入API URL"
            style="margin-bottom: 10px;"
          />
          <el-button @click="testManualApi" type="warning">测试API</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { changeLanguage, getCurrentLanguage } from '@/api/common'

export default {
  name: 'TestApi',
  data() {
    return {
      apiResponse: '',
      testUrl: '/common/language'
    }
  },
  methods: {
    async testChangeLanguage(lang) {
      try {
        this.apiResponse = `正在切换语言到: ${lang}...\n`
        
        const response = await changeLanguage(lang)
        this.apiResponse += `API响应:\n${JSON.stringify(response, null, 2)}\n`
        
        if (response.code === 200) {
          this.apiResponse += `✅ 语言切换成功!\n`
        } else {
          this.apiResponse += `❌ 语言切换失败: ${response.msg}\n`
        }
      } catch (error) {
        this.apiResponse += `❌ API调用失败:\n${error.message}\n`
        console.error('Language change API error:', error)
      }
    },
    
    async testGetCurrentLanguage() {
      try {
        this.apiResponse = '正在获取当前语言...\n'
        
        const response = await getCurrentLanguage()
        this.apiResponse += `API响应:\n${JSON.stringify(response, null, 2)}\n`
        
        if (response.code === 200) {
          this.apiResponse += `✅ 获取当前语言成功!\n`
          this.apiResponse += `当前语言: ${response.data.language}\n`
        } else {
          this.apiResponse += `❌ 获取当前语言失败: ${response.msg}\n`
        }
      } catch (error) {
        this.apiResponse += `❌ API调用失败:\n${error.message}\n`
        console.error('Get current language API error:', error)
      }
    },
    
    async testManualApi() {
      try {
        this.apiResponse = `正在测试API: ${this.testUrl}...\n`
        
        const response = await this.$http.get(this.testUrl)
        this.apiResponse += `API响应:\n${JSON.stringify(response.data, null, 2)}\n`
      } catch (error) {
        this.apiResponse += `❌ API调用失败:\n${error.message}\n`
        console.error('Manual API test error:', error)
      }
    }
  }
}
</script>

<style scoped>
.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style> 